import {defineComponent, reactive, ref} from "vue";
const img = require('./assets/logo.png') // eslint-disable-line
import HelloWorld from './components/HelloWorld'

// 调用函数进行render

function renderHelloWorld(num: number) {
  return <HelloWorld />
}
// .vue 文件是字符串的，不具备静态语言检测 tsx具备

const App = defineComponent({
  setup() {
    // setup 的变量都要是 响应式
    const state = reactive({
      name: 'shelley',
    })
    const numberRef = ref(1)
    setInterval(() => {
      state.name += '1'
      numberRef.value += 1
    }, 1000)
    //
    return () => {
      const number = numberRef.value
      console.log(state.name)
      // jsx 代码
      // return h('div', { id: 1234 }, [
      //   h('img', {
      //     alt: 'Vue Logo',
      //     src: img,
      //   }),
      //   h('p', state.name + number), // 不会增加
      // ])
      //tsx 中表示 jsx 的变量
      return <div id='app'>
        <img src={img} alt="Vue Logo"/>
        <p>{state.name + number}</p>
        {/* age webstorm 编辑器会提示 必传 js语法+注释方式 */}
        {/*<HelloWorld age={num}/>*/}
        {renderHelloWorld(13)}
        <input type="text" v-model={state.name}/>
      </div>
    }
  },
})

export default App